<template>
  <div class='floor-box'>
    <div class='floor-header'></div>
    <div class='floor-main'>
      <div class='floor-main-left'>
        <div>
          <div class='left-header'>U1地下交通设施</div>
          <div class='left-bottom'>
            <img src="../../static/image/2/红色报警.png"
                 alt="">
            <span>2</span>
          </div>
        </div>
        <div>2
          <div>U1地下交通设施</div>
          <div>
            <img src=""
                 alt="">图标
            <span>4</span>
          </div>
        </div>
        <div>3
          <div>U1地下交通设施</div>
          <div>
            <img src=""
                 alt="">图标
            <span>4</span>
          </div>
        </div>
        <div>4
          <div>U1地下交通设施</div>
          <div>
            <img src=""
                 alt="">图标
            <span>4</span>
          </div>
        </div>
      </div>
      <div class='floor-main-center'>
        <div>U1地下层</div>
        <div>中间大图</div>
        <div>底部小图标</div>
      </div>
      <div class='floor-main-right'>
        <div class='right-header'></div>
        <div class='right-body'></div>
      </div>
    </div>
  </div>
</template>
<script>
export default {

}
</script>
<style lang="scss">
$precent : 100vw / 1920;
.floor-box {
  border: 1*$precent solid red;
  width: 1350*$precent;
  background: url("../../static/image/1/floor背景.png") no-repeat;
  background-size: 100% 100%;
  .floor-header {
    height: 48*$precent;
    width: 100%;
    border: 1*$precent solid blue;
    background: url("../../static/image/1/floorHeader.png") no-repeat;
    background-size: 100% 100%;
  }
  .floor-main {
    height: 752*$precent;
    display: flex;
    flex-direction: row;
    .floor-main-left {
      width: 290*$precent;
      height: 100%;
      border: 1*$precent solid yellow;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background: url("../../static/image/1/floor左侧背景.png") no-repeat;
      background-size: 100% 100%;
      > div {
        width: 100%;
        flex: 1;
        border-bottom: 1*$precent solid green;
        background: url("../../static/image/1/楼层图.png") no-repeat;
        background-size: 100% 100%;
        position: relative;
        .left-header {
          position: absolute;
          left: 0;
          top: 10*$precent;
          background: url("../../static/image/1/floor左侧头部背景.png")
            no-repeat;
          background-size: 100% 100%;
        }
        .left-bottom {
          position: absolute;
          width: 89*$precent;
          height: 36*$precent;
          right: 0;
          bottom: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: url("../../static/image/1/floor警示背景.png") no-repeat;
          background-size: 100% 100%;
          img {
            height: 25*$precent;
            width: 25*$precent;
            margin-right: 10*$precent;
          }
          > span {
            font-size: 25*$precent;
            color: red;
            font-weight: 600;
          }
        }
      }
    }
    .floor-main-center {
      flex: 1;
    }
    .floor-main-right {
      height: 100%;
      width: 310*$precent;
      border: 1*$precent solid yellowgreen;
    }
  }
}
</style>